<template>
  <s-table
    ref="table"
    size="default"
    rowKey="id"
    :columns="columns"
    :data="data"
    showPagination="auto"
    :pagination="pagination"
  >
    <template slot="img_url" slot-scope="text">
      <a-avatar shape="square" :size="64" icon="skin" :src="text" />
    </template>
    <a-badge
      :status="orderStatus(record.status)"
      :text="record | serveStatusFilter"
      slot="status"
      slot-scope="text, record"
    />
    <span slot="action" slot-scope="text, record">
      <template>
        <a @click="handleEdit(record)">详情</a>
      </template>
    </span>
  </s-table>
</template>

<script>
import orderStatus from '@/mixins/orderStatus'
import formTableMixin from '@/mixins/formTableMixin'
const columns = [
  {
    title: '姓名',
    dataIndex: 'serve_name'
  },
  {
    title: '手机号',
    dataIndex: 'serve_mobile'
  },
  {
    title: '支付价格',
    dataIndex: 'price',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '服务地址',
    dataIndex: 'serve_address'
  },
  {
    title: '订单号',
    dataIndex: 'out_trade_no'
  },
  {
    title: '时间',
    dataIndex: 'utime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  mixins: [formTableMixin, orderStatus],
  props: {
    data: {
      type: Function,
      required: true
    },
    type: {
      type: String,
      default: 'appliance'
    }
  },
  data () {
    this.columns = columns
    return {}
  },
  methods: {
    handleEdit (record) {
      this.$router.push({
        name: `${this.type}OrderDetail`,
        query: {
          id: record.id
        }
      })
    },
    refresh () {
      this.$refs.table.refresh()
    }
  }
}
</script>

<style></style>
